<template>
    <div>
      <el-autocomplete
        v-model="state4"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        @select="handleSelect"
      ></el-autocomplete>
    </div>
</template>

<script>
    const load =[ { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
      { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
      { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
    ]
    export default {
        name: "es6",
        data () {
         return {
           state4:'',
           restaurants:load,
           timeout:  null
         }
        },
      methods: {
        querySearchAsync(queryString, cb){
          console.log('queryString',queryString);
          console.log(cb);
          const restaurants = this.restaurants;
          const results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            cb(results);
          }, 1000 * Math.random());
        },
        createStateFilter(queryString) {
          return (state) => {
            return (state.value.toLowerCase().includes(queryString.toLowerCase()) === true);
          };
        },
        handleSelect(item){
          console.log(item)
        }
      }
    }
</script>

<style scoped>

</style>
